import React from 'react';
import {Layout, Select, DatePicker, Input, Table, Menu, Dropdown, Modal, message} from 'antd'
import WithMon from './with-mon'
import {CopyOutlined, FileExcelOutlined, PayCircleOutlined} from '@ant-design/icons';
import './Voucher.css'
import axios from "../../../util/http";
import * as url from "../../../util/api";
const { Option } = Select;
const { RangePicker } = DatePicker;
const { Search } = Input;
// let selectValue = '';
function handleChange(value) {
    console.log(`selected ${value}`);
    // selectValue =`selected ${value}`
}
function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
}
// 付款确认
class PaymentSure extends React.Component {
    constructor(props){
        super(props)
        this.state=({
            fundId: '',//流水单号
            data: '',//充值时间
            clientId: '',//经销商名称
            paymentMethod:'',//支付方式
            cashAccount: 0,//充值金额
            psyNum:'',//收款账户
            summary:'',//摘要
            visibleA:false,//详情
            visibleB:false,//确认收款
            visibleC:false,//作废收款
        })
    }
    //确认收款
    surePay=(text,record,e)=>{
        let {fundId,data,clientId,paymentMethod,cashAccount,psyNum,summary}=text
        this.setState({
            fundId: fundId,//流水单号
            data: data,//充值时间
            clientId: clientId,//经销商名称
            paymentMethod:paymentMethod,//支付方式
            cashAccount: cashAccount,//充值金额
            psyNum:psyNum,//收款账户
            summary:summary,//摘要
            visibleB:true,//作废收款
        })
    }
    //作废收款
    delPay=(text,record,e)=>{
        let {fundId,data,clientId,paymentMethod,cashAccount,psyNum,summary}=text
        this.setState({
            fundId: fundId,//流水单号
            data: data,//充值时间
            clientId: clientId,//经销商名称
            paymentMethod:paymentMethod,//支付方式
            cashAccount: cashAccount,//充值金额
            psyNum:psyNum,//收款账户
            summary:summary,//摘要
            visibleC:true,//作废收款
        })
    }
    //收款详情
     PDetails=(text,record,e)=> {
        e.preventDefault()
         let {fundId,data,clientId,paymentMethod,cashAccount,psyNum,summary}=text
         this.setState({
             fundId: fundId,//流水单号
             data: data,//充值时间
             clientId: clientId,//经销商名称
             paymentMethod:paymentMethod,//支付方式
             cashAccount: cashAccount,//充值金额
             psyNum:psyNum,//收款账户
             summary:summary,//摘要
             visibleA:true,
             getData:[],
             nextData:[],
         })

    }
     dropdownMenu=(text, record)=> {
        const menu = (
            <Menu>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.PDetails.bind(this,text,record)} href='#'>
                        <CopyOutlined style={{marginRight:'10px'}}/>详情
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.surePay.bind(this,text,record)}>
                        <PayCircleOutlined style={{marginRight:'10px'}}/>确认收款
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer"  onClick={this.delPay.bind(this,text,record)}>
                        <FileExcelOutlined style={{marginRight:'10px'}}/>作废
                    </a>
                </Menu.Item>
            </Menu>
        );
        return(
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    . . .
                </a>
            </Dropdown>
        )
    }
    handleOkA = e => {
        console.log(e);
        this.setState({
            visibleA: false,
        });
        message.success('确认成功');
    };
    handleCancelA = e => {
        // console.log(e);
        this.setState({
            visibleA: false,
        });
        message.success('取消成功');
    };
    handleOkB = e => {
        console.log(e);
        this.setState({
            visibleB: false,
        });
        message.success('确认成功');
    };
    handleCancelB = e => {
        console.log(e);
        this.setState({
            visibleB: false,
        });
        message.success('取消成功');
    };
    handleOkC = e => {
        console.log(e);
        this.setState({
            visibleC: false,
        });
        message.success('作废成功');
    };
    handleCancelC = e => {
        // console.log(e);
        this.setState({
            visibleC: false,
        });
        message.success('取消成功');
    };
    componentDidMount() {
        axios({
            url:url.getPaymentSure,
            method:'get',
        }).then(res=>{
            // console.log(res.data.data)
            this.setState({
                getData:res.data.data,
                nextData:res.data.data,
            })
        })
        // this.props.moneyMan.getRefundSure()
        // this.props.moneyMan.getRefundSure('hh').then(res=>{
        //     console.log(res)
        // })
    }
    searchData=(value)=>{
        // console.log(value)
        let Data = this.state.getData
        if (value===''){
            let next = this.state.nextData
            this.setState({
                getData:next
            })
        } else{
            let newData = Data.filter(item=>{
                return item.clientId===value
            })
            this.setState({
                getData:newData
            })
        }

    }
    render() {
        const columns = [
            {
                title: '流水号',
                dataIndex: 'fundId',
                align:'center',
            },
            {
                title: '支付时间',
                dataIndex: 'data',
                align:'center',
            },
            {
                title: '经销商名称',
                dataIndex: 'clientId',
                align:'center',
            },
            {
                title: '支付方式',
                dataIndex: 'paymentMethod',
                align:'center',
            },
            {
                title: '金额',
                dataIndex: 'cashAccount',
                align:'center',
            },
            {
                title: '收款账户',
                dataIndex: 'psyNum',
                align:'center',
            },
            {
                title: '摘要',
                dataIndex: 'summary',
                align:'center',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                {this.dropdownMenu(text, record)}
            </span>
                ),
            },
        ];
        const data = [
            // {
            //     key: '4',
            //     fundId:'5',
            //     clientId: '大力大力',//经销商名称
            //     cashAccount: 908,
            //     prepaymentAccount: 0,
            //     rebateAccount: 0,
            //     totalAccount:908,
            //     amount:102,//充值或扣款金额
            //     data:'2020-05-11 10:16:08',//充值金额时间
            //     summary:'摘要',
            //     note:'备注',
            //     paymentMethod:'现金',//支付方式
            //     TopupAccount:'现金账户',//充值账户，（现金账户，返点账户）
            // },
            {
                key: '1',
                fundId: 'DH-O-20171108-025345',//流水单号
                data: '2020-05-11 10:16:08',//充值时间
                clientId: '大力大力',//经销商名称
                paymentMethod:'现金',//支付方式
                cashAccount: 908,//充值金额
                psyNum:'中国建设银行',//收款账户
                summary:'摘要',//摘要
            },
            {
                key: '2',
                fundId: 'DH-O-20171108-025223',//流水单号
                data: '2020-05-11 10:16:08',//充值时间
                clientId: '出场',//经销商名称
                paymentMethod:'现金',//支付方式
                cashAccount: 28,//充值金额
                psyNum:'中国建设银行',//收款账户
                summary:'摘要',//摘要
            },
            {
                key: '3',
                fundId: 'DH-O-20171108-025222',//流水单号
                data: '2020-05-11 10:16:08',//充值时间
                clientId: '处长',//经销商名称
                paymentMethod:'现金',//支付方式
                cashAccount: 32,//充值金额
                psyNum:'中国建设银行',//收款账户
                summary:'摘要',//摘要
            },
            {
                key: '4',
                fundId: 'DH-O-20171108-02544',//流水单号
                data: '2020-05-11 10:16:08',//充值时间
                clientId: '拿来',//经销商名称
                paymentMethod:'现金',//支付方式
                cashAccount: 43,//充值金额
                psyNum:'中国建设银行',//收款账户
                summary:'摘要',//摘要
            },
        ];
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'20px'}}>
                    <div className='topBox'>
                        <div className='topLeft'>
                            <Select bordered={false} style={{marginLeft:'10px',width:140,marginRight:'20px'}} defaultValue="全部收款账号"  onChange={handleChange}>
                                <Option value="全部收款账号">全部收款账号</Option>
                                <Option value="现金">现金</Option>
                            </Select>
                            <RangePicker style={{width:400,height:30}}/>
                            <Search
                                placeholder="请输入经销商名称/订单号/支付流水号"
                                onSearch={this.searchData}
                                style={{width:400}}
                            />
                        </div>
                        <div className='MoneyRight'>
                            待确认收款合计：<span style={{color:'red'}}>0:00</span>
                        </div>
                    </div>
                </Layout>
                <div className='tableBox'>
                    <Table columns={columns} dataSource={this.state.getData} onChange={onChange} />
                </div>
                <Modal
                    title="订单付款"
                    visible={this.state.visibleA}
                    onOk={this.handleOkA}
                    onCancel={this.handleCancelA}
                    okText="确认收款"
                    cancelText="取消"
                >
                    <p><span className='huise'>订单号：</span>{this.state.fundId}</p>
                    <p><span className='huise'>金额：</span>{this.state.cashAccount}</p>
                    <p><span className='huise'>支付方式：</span>{this.state.paymentMethod}</p>
                    <p><span className='huise'>备注：</span>{this.state.fundId}</p>

                    <p style={{marginTop:'20px'}}><span className='huise'>流水号：</span>{this.state.fundId}</p>
                    <p><span className='huise'>日期：</span>{this.state.data}</p>
                    <p><span className='huise'>操作人：</span>{this.state.fundId}</p>
                </Modal>
                <Modal
                    title="确认"
                    visible={this.state.visibleB}
                    onOk={this.handleOkB}
                    onCancel={this.handleCancelB}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确认将该笔款项标识为已收款？</p>
                    <p>经销商名称：{this.state.clientId}</p>
                    <p>金额：{this.state.cashAccount}</p>
                    <p>支付方式：{this.state.paymentMethod}</p>
                </Modal>
                <Modal
                    title="作废确认"
                    visible={this.state.visibleC}
                    onOk={this.handleOkC}
                    onCancel={this.handleCancelC}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确认作废该笔收款记录？</p>
                    <p>经销商名称：{this.state.clientId}</p>
                    <p>金额：{this.state.cashAccount}</p>
                    <p>支付方式：{this.state.paymentMethod}</p>
                </Modal>
            </div>
        );
    }
}

export default WithMon('收款确认')(PaymentSure);







